<template>
  <div class="column-box">
    <h3 class="column-bar" :class="{center: !more}">
      <p class="title">{{title}}</p>
      <router-link v-if="more" tag="span" to="/masters" class="more">更多大师</router-link>
    </h3>
    <swiper class="stars" :options="options">
      <swiper-slide v-for="(v, i) in masters" :key="i">
        <router-link tag="dl" :to="{path: 'mdetail', query: {id: v.id}}">
          <dt :style="{backgroundImage: 'url('+ hasdomain(v.userPhoto) +')'}"></dt>
          <dd>
            <p>{{v.name}}</p>
            <span>{{v.grade_text}}</span>
          </dd>
        </router-link>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      default: '',
    },
    type: {
      default: 1,
    },
    more: {
      default: false,
    }
  },
  data() {
    return {
      options: {
        slidesPerView: 3
      },
      masters: [],
    };
  },
  methods: {
		getMasters () {
			this.$http.fetchGet('getmasterlist', {
				infotype: this.type,
				offset: 0,
				limit: 10,
			}).then(({data}) => {
        console.log('大师列表', data);
				this.masters = data;
			})
		},
  },
  created () {
    this.getMasters();
  }
};
</script>

<style scoped lang="less">
.stars {
  .pb(30);
  dl{
    display: flex;
    align-items: center;
    dt{
      .ml(18);
      .mr(16);
      .w(120);
      .h(120);
      .bri(20);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    dd{
      flex: 1;
      p{
        .mb(10);
         .f24;
      }
      span{
        color: #666666;
        .f20;
      }
    }
  }
}
</style>
